<template>
  <div class="wrapper_add">
    <el-form size="small" class="demo-form-inline">
      <div class="search">
        <el-input v-model="name" class="search_input" placeholder="请输入内容" />
        <el-button type="primary" size="small">查找</el-button>
      </div>
    </el-form>
    <div class="table">
      <el-table :data="list">
        <el-table-column label="成员">
          <template slot-scope="scope">
            <div class="names">
              <el-avatar class="avatar" shape="circle" :size="40" fit="contain" :src="scope.row.avater" />
              {{ scope.row.dataName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="项目角色">
          <template slot-scope="scope">
            <el-select v-model="projectRole" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" class="add" @click="selectedItem(scope.row)">添加</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      list: [
        {
          dataName: 'jjjj',
          test: 'kkk',
          avater: 'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2070453827,1163403148&fm=26&gp=0.jpg'
        }
      ],
      options: [],
      projectRole: ''
    }
  },
  mounted() {

  },
  methods: {
    selectedItem(item) {
      this.$emit('selectedItem', item)
    }
  }
}
</script>

<style lang="scss" scoped>
$baseSpace: 20px;
.wrapper_add{
  // padding: 0 $baseSpace;
  .search{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    margin-bottom: $baseSpace;
    .search_input{
      width: 500px;
      margin-right: 10px;
      ::v-deep input{
        border-radius: 20px;
      }
    }
  }
  .table{
    .add{
      border-radius: 20px;
      height: 31px;
      padding: 0;
      width: 80px;
    }
    .names{
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      .avatar{
        margin-right: 4px;
      }
    }
  }
}
</style>
